import { Component } from "react";
import Title from "./title";
class Son2 extends Component{
  render(){
    console.log('类组件接收插槽内容',this.props)
    return(
      <div>
        <h3>儿子2</h3>
      </div>
    )
  }
}

function Son1(props) {
  console.log('函数组件接收插槽内容', props)
  return(
    <div>
      <h3>儿子1</h3>
      <ul>
        <li>{props.children}</li>
      </ul>
    </div>
  )
}

/**
 * + children 属性：表示该组件的子节点，只要组件有子节点，props就有该属性

+ children 属性与普通的 props 一样，值可以是任意值（文本、React元素、组件，甚至是函数）
 */
class App extends Component{
  state={
    inputValue:''
  }
  changeValue=(e)=>{
    this.setState({
      inputValue:e.target.value
    })
  }
  render(){
    return(
      <div>
        <h1>chlidren属性</h1>
        <Title>
          <h2>{this.state.inputValue}</h2>
        </Title>
        <hr />
        <input type="text" 
        value={this.state.value}
        onChange={this.changeValue}
        />
        <hr />
        <Son1>
          456
          <h3>hello</h3>
        </Son1>
        <hr/>
        <Son2/>
      </div>
    )
  }
}
export default App